import {mapGetters} from 'vuex';
import {deepAssign} from '@/utils/util';
import {getToken} from '@/utils/auth';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export const FormMixin = {
    data() {
        return {
            form: {},
            // 配置项
            defaultFormMixinConfig: {
                // 对应的api目录下 js文件
                api: "", // == @/api/demo/demo_api.js
                // 对应api中方法名称  默认与属性名相同
                apiProps: {
                    submit: "submit",
                    getDetail: "getDetail",
                },
                // disableApi
                disableApi: false,
                // 启动自动加载详情 只针对默认模式
                enabledAutoLoadDetail: true,
                // 禁止使用默认 自动加载详情
                disableLoadDetail: false, // 对应方法"onLoadDetail", 如果为true,可重写“onLoadDetail”方法,
                // 禁止使用默认 提交
                disableSubmit: false, // 对应方法"onSubmit", 如果为true,可重写“onSubmit”方法,
            },
            formMixinConfig: {},
            // Api 接口对象
            apiModule: {},
            loading: false,
        }
    },
    created() {
        this.configBefore();
        this.formMixinConfig = deepAssign(this.defaultFormMixinConfig, this.formMixinConfig);
        if (!this.formMixinConfig.disableApi) {
            if (!this.formMixinConfig.api) {
                throw new Error("请配置formMixinConfig.api");
            }
            this.apiModule = window.$globApi[`./api/${this.formMixinConfig.api}.js`];
            if (!this.apiModule) {
                throw new Error(`未找到对应api文件(${this.formMixinConfig.api}.js)`);
            }
        }
    },
    computed: {
        ...mapGetters(['permission', 'userInfo']),
    },
    mounted() {
        if (this.formMixinConfig.enabledAutoLoadDetail) {
            this.onLoadDetail();
        }
    },
    methods: {
        /**
         * 创建之前，可对config进行相关操作
         */
        configBefore() {

        },
        onLoadDetail() {
            if (!this.formMixinConfig.disableLoadDetail) {
                if (this.detailBefore) {
                    // 如果返回true, 终止执行
                    if (this.detailBefore()) {
                        return;
                    }
                }
                if (!this.form.id) {
                    throw new Error(`没有指定的‘form.id’数据`)
                }
                const apiName = this.formMixinConfig.apiProps.getDetail || "getDetail";
                let api = this.apiModule[apiName];
                if (api) {
                    api(this.form.id).then(res => {
                        this.form = res.data.data;
                        if (this.detailAfter) {
                            this.detailAfter();
                        }
                    }, error => {
                        if (this.detailError) {
                            this.submitError(error);
                        }
                    });
                } else {
                    throw new Error(`${this.formMixinConfig.api} 没有 ${apiName} 方法`)
                }
            }
        },
        onSubmit(form, done) {
            if (!this.formMixinConfig.disableSubmit) {
                const apiName = this.formMixinConfig.apiProps.submit || "submit";
                let api = this.apiModule[apiName];
                if (api) {
                    if (this.submitBefore) {
                        // 如果返回true, 终止执行
                        if (this.submitBefore(form, done)) {
                            return;
                        }
                    }
                    this.loading = true;
                    api(form).then(
                        (res) => {
                            const data = res.data;
                            done();
                            this.loading = false;
                            if (data.success) {
                                if (this.submitAfter) {
                                    this.submitAfter(res);
                                }
                                this.$message.success(data.msg || "操作成功")
                            } else {
                                this.$message.error(data.msg || "操作失败")
                            }
                        },
                        error => {
                            done();
                            this.loading = false;
                            if (this.submitError) {
                                this.submitError(error);
                            }
                        }
                    );
                } else {
                    done();
                    throw new Error(`${this.formMixinConfig.api} 没有 ${apiName} 方法`)
                }
            }
        },
        handleValidateError() {
            const errorEls = document.querySelector(".is-error");
            if (errorEls) {
                errorEls.scrollIntoView({ block: 'center', behavior: 'auto' })
            }
        },
    }
};
